<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="CSS/common/reset.css">
  <link rel="stylesheet" href="CSS/table.css">
</head>

<body>
  <div id="wrap">
    <div id="subBar">
      <a href="#">
        <img src="images/logo.png" class="logo" alt="">
      </a>
      <div class="message">
        <p>欢迎您:kaivon</p>
        <p>空闲桌位:5桌</p>
        <p>正在点餐:1桌</p>
        <p>正在用餐:5桌</p>
        <p>未选桌子</p>
      </div>
      <ul class="action">
        <li class="ac"><i>0</i><span class="iconfont">&#xe65e;</span>已点</li>
        <li><span class="iconfont">&#xe62e;</span>座位</li>
        <li><span class="iconfont">&#xe625;</span>后台</li>
        <li><span class="iconfont">&#xe892;</span>退出</li>
      </ul>
    </div>
    <div id="content">
      <ul class="legend">
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>空闲</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>点餐中</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>用餐中</span>
        </li>
      </ul>
      <ul class="table">
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>1号桌</span>
        </li>
        <li class="eating">
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>2号桌</span>
        </li>
        <li class="ordering">
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>3号桌</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>4号桌</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>5号桌</span>
        </li>
        <li class="ordering">
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>6号桌</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>7号桌</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>8号桌</span>
        </li>
        <li>
          <div><span class="iconfont">&#xe6ea;</span></div>
          <span>9号桌</span>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>